<template>
  <div class="my">
    <Header title="个人数据银行" />
    <dl class="head">
      <dt>微信头像</dt>
      <dd>姓名</dd>
      <dd>{{ this.$route.query.tel ? this.$route.query.tel : " 152*****215" }}</dd>
    </dl>
    <div class="content">
      <li @click="$router.push({ path: '/setTel' })">
        <span>登录手机号</span>
        <span style="float:right">
          {{ this.$route.query.tel ? this.$route.query.tel : " 152*****215" }}
          <i
            class="iconfont icon-icon-test2"
          ></i>
        </span>
      </li>
      <li @click="$router.push({ path: '/reSetPwd' })">
        <span>修改登录密码</span>
        <span style="float:right">
          <i class="iconfont icon-icon-test2"></i>
        </span>
      </li>
      <li @click="isShow ? (isShaow = true) : $router.push({ path: '/reSetPwd' })">
        <span>微信授权绑定</span>
        <span style="float:right">
          {{ isShow ? "已授权" : "未授权" }}
          <i class="iconfont icon-icon-test2"></i>
        </span>
      </li>
      <li @click="$router.push({ path: '/autonym' })">
        <span>实名认证</span>
        <span style="float:right">
          {{ isReally ? "已实名" : "未实名" }}
          <i class="iconfont icon-icon-test2"></i>
        </span>
      </li>
    </div>
    <div class="footer">
      <button class="btn" @click="$router.push({ path: '/' })">退出登录</button>
    </div>
    <!-- 遮罩层 -->
    <div class="shaow" v-show="isShaow">
      <div class="shaow_content">
        <div>要解除与微信账号的绑定吗？</div>
        <div @click="onCancel">取消</div>
        <div @click="onOk">确定</div>
      </div>
    </div>
    <!-- 遮罩结束 -->
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Header from "@/components/header.vue";
export default Vue.extend({
  data() {
    return {
      isShow: true,
      isShaow: false,
      isReally: this.$route.query.isReally || false,
    };
  },
  components: {
    Header,
  },
  methods: {
    onOk() {
      this.isShow = false;
      this.isShaow = false;
    },
    onCancel() {
      this.isShaow = false;
    },
  },
});
</script>
<style scoped>
/* 遮罩层 */
.shaow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.shaow_content {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  line-height: 50px;
  background: white;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.shaow_content div:nth-child(1) {
  width: 100%;
  line-height: 80px;
}
.shaow_content div:nth-child(2) {
  border-right: 1px solid #eee;
}
.shaow_content div:nth-child(2),
.shaow_content div:nth-child(3) {
  width: 49.5%;
  text-align: center;
  border-top: 1px solid #eee;
}
.my {
  width: 100%;
  height: 100vh;
  background: #eee;
}
.head {
  height: 120px;
  background: white;
  margin-bottom: 15px;
}
.head dt {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: black;
  text-align: center;
  line-height: 100px;
  color: white;
  float: left;
  margin: 10px;
}
.head dd {
  padding-top: 30px;
}
.content {
  background: white;
  margin-bottom: 20px;
}
.content li {
  padding: 15px 8px;
}
/* btn */
.footer {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.footer p {
  margin-top: 15px;
}
.btn {
  width: 90%;
}
</style>
